<template>
	<!-- 发货 -->
	<view>
		<d-navBar title="填写物流信息" is-tran isPerch></d-navBar>
		<view class="my-bg"></view>

		<view class="expense">
			<view class="ex-box">
				<view class="ex-title">快递公司</view>
				<view class="df aic" @click="goFindLogistics">
					<view class="ex-text">{{logisticsItem.name?logisticsItem.name:dropFont}}</view>
					<image class="ex-check" src="../../../static/common/go.png"></image>
				</view>
			</view>
			<view class="ex-box">
				<view class="ex-title">快递单号</view>
				<view class="ex-text"><input type="text" v-model="form.logisticsNumber" placeholder="请输入" /></view>
			</view>
		</view>

		<view class="bottom_btn">
			<view class="btn" @click="addLogisticsFn" style="background-color: #2AD03D;">提交</view>
		</view>

		<!-- <u-select v-model="dropShow" :list="dropList" @confirm="dropFn"></u-select> -->
		<u-picker :show="dropShow" :columns="dropList" keyName="name" @confirm="dropFn" @cancel="this.dropShow=false"
			confirmColor="#2AD03D"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					id: '', //订单id
					logisticsNumber: '', //	物流单号
					logisticsId: '', //	物流公司id
				},
				option: {},
				dropShow: false,
				dropList: [],
				dropFont: '请选择',
				logisticsItem: {},
			}
		},
		onLoad(option) {
			console.log('option', option);
			this.option = option
			this.form.id = option.id
			// this.getDropDownFn()
		},
		onShow() {
			this.getLogistics()
		},
		destroyed() {
			uni.removeStorageSync('logistics')
		},
		methods: {
			//获取物流公司信息
			getLogistics() {
				let logisticsItem = uni.getStorageSync('logistics')
				if (logisticsItem) {
					this.logisticsItem = JSON.parse(logisticsItem)
					this.form.logisticsId=JSON.parse(logisticsItem).id
				} else {
					this.logisticsItem = {}
				}
			},


			// 确定发货
			async addLogisticsFn() {
				if (!this.form.logisticsId) {
					return uni.showToast({
						icon: "none",
						title: "请选择物流公司"
					})
				}
				if (!this.form.logisticsNumber) {
					return uni.showToast({
						icon: "none",
						title: "请输入物流单号"
					})
				}
				const {
					code,
					data
				} = await this.$api.updateInfoLogistics(this.form)
				if (code == 200) {
					uni.showToast({
						title: "发货成功",
						icon:"success",
						duration:1000
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				} else {
					uni.showToast({
						icon: 'error',
						title: "发货失败"
					})
				}
			},
			// 跳物流公司
			goFindLogistics() {
				uni.navigateTo({
					url: '/pages/order/pages/findLogistics'
				})
			},



			// 获取物流公司下拉
			async getDropDownFn() {
				const {
					data
				} = await this.$api.logisticsDropDown()
				console.log('物流公司下拉data', data);
				this.dropList = data.map((item, index) => {
					if (index < 10) {
						return item
					}
					console.log(item);
				})
			},
			// 下拉方法
			dropFn(e) {
				console.log('e', e);
				this.dropFont = e[0].label
				this.form.logisticsId = e[0].value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-bg {
		width: 750rpx;
		height: 320rpx;
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
	}

	.expense {
		.ex-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 0rpx;
			margin: 0 32rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.ex-text {
				text-align: right;
				font-size: 24rpx;
				color: #333333;
				flex: 1;
			}
		}

		.ex-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			flex: none;
		}

		.ex-check {
			width: 20rpx;
			height: 20rpx;
			margin-left: 12rpx;
		}

		.ex-remark {
			padding: 32rpx 32rpx 0;

			.ex-area {
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				margin-top: 12rpx;
			}

			.ex-inner {
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.upload-img {
					width: 160rpx;
					height: 160rpx;
					margin: 0 20rpx 20rpx 0;
				}
			}
		}
	}
</style>